import { Button, Table ,Descriptions, Card} from "antd"
import {useEffect,useState,useMemo} from "react"
import { queryEmp } from "../../../../utils/request/api"
import Record from "./components/Record"
import { toGBtime } from "../../../../utils/common"
export default ()=>{
    useEffect(()=>{
       getEmp(1,2)
    },[])
    
    let [empList,setEmpList]=useState([])
    let [total,setTotal]=useState(0)
    let [isRecord,setIsRecord]=useState(false)
    let [cutId,setCutId]=useState(0)
    let [cachedata,setCachedata]=useState({})

    const getEmp=(pageNum,pageSize)=>{// 获取员工
        queryEmp({pageNum,pageSize})
        .then(res=>{
            console.log(res);
            if(res.meta.code==200){
                setEmpList(res.data)
                setTotal(res.pages.total)
            }
        })
    }
    const openRecord=id=>{// 操作
        // console.log(id);
        setIsRecord(true)
        setCutId(id)
    }
    const cancelRecord=(data)=>{// 取消操作
        // console.log(data);
        setIsRecord(false)
        setCachedata(data)
    }
    const okRecord=(data)=>{// 操作成功
        setIsRecord(false)
        setCachedata(data)
        getEmp(1,2)
    }
    const renderEmp=useMemo(()=>{
        const enumobj={
            name: "姓名",
            sex: "性别",
            tel: "电话",
            age: "年龄",
            idCard: "身份证",
            NativePlace: "籍贯",

            education: "学历",
            school: "毕业院校",
            // id: 3
           
            // depID: 1
            depName: "部门",
            
            major: "业务",
          
            // positionId: 1
            positionName: "职位",
            entryTime: "入职时间",

            // resume: "/images/01.jpg"
            assessmentSalary: "底薪",

            salary: "薪酬",
            
            
        }
        const renderDet=item=>
        <Card>
            <Descriptions column={1} >
            {
                Object.keys(enumobj).map(v=>
                <Descriptions.Item label={enumobj[v]}>
                    {/* {v} */}
                    {v=="entryTime"?toGBtime(item[v]):item[v]}
                </Descriptions.Item>)
            }
          
          
        </Descriptions>
        </Card>
        const props={
            columns:[
               {
                  title:"id",
                  dataIndex:"id",
                  key:"id"
               },
               {
                title:"姓名",
                dataIndex:"name",
                key:"name"
               },
               {
                title:"职位",
                dataIndex:"positionName",
                key:"positionName"
               },
               {
                title:"部门",
                dataIndex:"depName",
                key:"depName"
               },
               {
                title:<Button onClick={()=>openRecord(0)} size="small" type="primary">添加员工</Button>,
                width:"30%",
                render:item=><>
                  <Button size="small" onClick={()=>openRecord(item)} type="primary">修改</Button>
                  &nbsp;
                  &nbsp;
                  <Button size="small" type="danger">删除</Button>
                  &nbsp;
                  &nbsp;
                  <Button size="small" type="primary">分配工单</Button>
                  &nbsp;
                  &nbsp;
                  <Button size="small" >添加奖惩</Button>
                </>
               }
            ],
            dataSource:empList,
            expandable:{
                expandedRowRender: record => renderDet(record),
                rowExpandable: record => record.name !== 'Not Expandable',
              },
            rowKey:'id',
            pagination:{
                total,
                pageSize:2,
                onChange:(page)=>{
                    // console.log(page);
                    getEmp(page,2)
                }
            },
           scroll:{
              y:"500px"
           }

        }
        return isRecord?<Record 
        id={cutId} 
        cancel={cancelRecord}
        cachedata={cachedata}
        ok={okRecord}
         />:<Table {...props} />
    },[empList,isRecord])
    return <>
       {renderEmp}
       {/* {toGBtime('2022-11-27T20:47:12.000Z')} */}
    </>
}